<template>
  <HerinContainer
    class="MainCoal-box"
    :delay="1"
    direction="Left"
    title="全矿用电概况"
  >
    <!-- tab按钮 -->
    <div slot="tab" class="MainCoal-box-tab">
      <div
        v-for="(item, i) in titletab"
        :key="i"
        :class="['btn', isbtn === item ? 'isbtn' : '']"
        @click="clickTitleTab(item)"
      >
        {{ item }}
      </div>
    </div>
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">
      <div class="content-top">
        <div class="top-left">
          <img class="top-left-img" src="@/assets/img/electric/icon-1.png" alt="">
          <span class="top-left-span">{{chartTitle}}累计用电总量</span>
        </div>
        <div class="top-right">
          <span class="top-right-num">6</span><span class="company">个</span>
        </div>
      </div>
      <MouldBoxV2
        :datas="lists"
        class="mouldbox-v2"
        :orderKeys="orderKeys"
        :chartTitle="isbtn + '用电量统计分析'"
      />
      <div class="content-top">
        <div class="top-left">
          <img class="top-left-img" src="@/assets/img/electric/icon-2.png" alt="">
          <span class="top-left-span">{{chartTitle}}累计用电告警</span>
        </div>
        <div class="top-right">
          <span class="top-right-num">6</span><span class="company">个</span>
        </div>
      </div>
      <mould-box
        :datas="data2"
        class="mouldbox"
        :chartTitle="isbtn + '告警趋势统计分析'"
        :chartOption="chartOption"
        :text="['告警']"
        height="9.8125rem"
      />
    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import MouldBox from '../common/MouldBox.vue';
import MouldBoxV2 from '../common/MouldBoxV2.vue';
export default {
  components: {
    HerinContainer,
    MouldBox,
    MouldBoxV2
  },
  data() {
    return {
      titletab: ['近1天', '近30天'],
      isbtn: '近1天',
      chartOption: {
        color: ['#DE2E39'],
        area: true,
        unit: '次'
      },
      data2: [
        { x: '12-01', y: 75, s: '近30天用电量' },
        { x: '12-06', y: 30, s: '近30天用电量' },
        { x: '12-11', y: 60, s: '近30天用电量' },
        { x: '12-16', y: 37, s: '近30天用电量' },
        { x: '12-21', y: 79, s: '近30天用电量' },
        { x: '12-26', y: 42, s: '近30天用电量' },
        { x: '12-31', y: 67, s: '近30天用电量' }
      ],
      orderKeys: ['平段', '尖峰段', '谷段', '高峰段'],
      lists: [
        {
          'alarmCount': 70,
          'level1': 'COAL_FLOW',
          'level1Desc': '平段'
        },
        {
          'alarmCount': 343,
          'level1': 'ENVIRONMENT',
          'level1Desc': '尖峰段'
        },
        {
          'alarmCount': 77,
          'level1': 'WATER_DRAIN',
          'level1Desc': '谷段'
        },
        {
          'alarmCount': 93,
          'level1': 'WATER_DRAIN',
          'level1Desc': '高峰段'
        }
      ]
    };
  },
  computed: {
    chartTitle() {
      let str = '';
      switch (this.isbtn) {
        case '近1天':
          str = '今日';
          break;
        case '近30天':
          str = '本月';
          break;
      }
      return str;
    }
  },
  // 初始赋值
  mounted() {
  },
  methods: {
    clickTitleTab(item) {
      this.isbtn = item;
    }
  }
};
</script>

<style lang='scss' scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .company{
      color: #838383;
      font-size: .75rem;
    }
    .mouldbox-v2{
      margin-bottom: .9375rem;
    }
    .content-top{
      width:20.625rem ;
      height: 2.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .9375rem;
      background-color: #1D2E45;
      border-radius: .25rem;
      padding: .9375rem;
      box-sizing: border-box;
      .top-left{
        .top-left-img{
          width: .875rem;
          height: .875rem;
          margin-right: .625rem;
          vertical-align:middle;
        }
        .top-left-span{
          font-size: .875rem;
          color: #F8F8F8;
          vertical-align:middle;
        }
      }
      .top-right-num{
        color: #00FDFF;
        font-size: 1rem;
        margin-right: .3125rem;
      }
    }
  }
}
</style>
